html,body{
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
}
header{
  width: 100%;
  height: 100px;
  background-color: #ffffff;
  margin-bottom: 20px;
  nav{
    width: 1190px;
    height: 100px;
    margin: 0 auto;
    h1{
    font-size: 28px;
    font-weight: 700;
    line-height: 100px;
    display: inline-block;
    }
  }
}
main{
  width: 100%;
  height: 936px;
  .container{
    width: 1190px;
    height: 936px;
    margin: 0 auto;
    .left{
      width: 228px;
      height: 436px;
      float: left;
      border: 1px solid #e5e5e5;
      border-radius: 6px;
      background-color: #ffffff;
      ul{
        vertical-align: top;
        width: 230px;
        max-height: 425px;
        overflow: auto;
        border: 1px solid #e5e5e5;
        border-radius: 6px;
        display: inline-block;
        float: left;
        background: #fff;
        padding: 20px 0;
        li{
          position: relative;
          cursor: pointer;
          font-weight: 700;
          font-size: 16px;
          color: #555;
          height: 22px;
          line-height: 22px;
          padding: 10.15px 10px 10px 30px;
          i{
            margin-right: 10px;
          }
        }
        li:nth-child(1){
          background-color:#f7f7f7;
        }
        li:nth-child(1)::after{
          content:"";
          position: absolute;
          height: 42px;
          width: 4px;
          background-color: #ffc300;
          top: 0;
          left:0;
        }
      }
    }
    .right{
      width: 950px;
      height: 887px;
      float:left;
      margin-left: 10px;
      .banner{
        width: 950px;
        height: 178px;
        float: left;
        border-radius: 6px;
        background: url(https://s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:7819dbd1/app/img/banner-new.038a5e11.jpg);
        background-size: 980px 178px;
        margin-bottom: 10px;
      }
      .dl{
        width: 950px;
        height: 700px;
        float: left;
        display: flex;
        flex-wrap:wrap;
        justify-content: flex-start;
      }
      dl{
        width: 310px;
        height: 167px;
        background-color: #ffffff;
        border-radius: 6px;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 310px;
        flex: 0 0 310px;
        box-sizing: border-box;
        height: 167px;
        border-radius: 4px;
        background-color: #fff;
        margin-bottom: 10px;
        padding: 25px 5px 20px 20px;
        margin-right: 10px;
        dt{
          width: 40px;
          height: 40px;
          margin-bottom: 20px;
          img{
          width: 40px;
          height: 40px;
          }
        }
        dd{
          font-size: 26px;
          line-height: 37px;
          color: #333;
          margin-bottom: 5px;
        }
        p{
          font-size: 14px;
          line-height: 20px;
          color: #999;
        }
      }
      dl:nth-child(3){
        margin-right: 0;
      }
      dl:nth-child(6){
        margin-right: 0;
      }
      dl:nth-child(9){
        margin-right: 0;
      }
    }
  }
}